<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!doctype html>
<html>
<head>
    <base href="<%=basePath%>" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="i/buyu.ico">
    <link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="css/amazeui.min.css" />
    <link rel="stylesheet"
          href="js/jquery-editable-select/jquery-editable-select.min.css" />
    <link rel="stylesheet" href="css/admin.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/dist/formSelects-v4.css" rel="stylesheet" />
    <style type="text/css">
        .waterTable tr td {
            background: #f3f4f6;
        }
        .tpl-block {
            font-size: 14px;
        }

        .am-list-static>li {
            padding: .2rem .0rem;
        }

        .am-nav>li>a {
            padding: .4em 0.2em;
        }
    </style>
</head>
<%
    String today = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
%>
<body>
<div class="tpl-portlet-components am-center">
    <input type="hidden" id="UserId" name="UserId">
    <div class="tpl-block am-u-sm-8">
        <div class="am-tabs" id="doc-tab-demo-1">
            <ul class="am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active"><a href="javascript: void(0)">玩法记录</a></li>
            </ul>

            <div class="am-tabs-bd">
                <div class="am-tab-panel am-active" style="min-height: 500px;">
                    <div class="am-g" style="margin-bottom: 10px;">
                        <div class="layui-form-item">
                            <form class="layui-form" id="queryForm" action="" onsubmit='return false'>
                                <div class="layui-form-item">
                                    <select name="ChooseGoods" id="ChooseGoods"
                                            lay-filter="ChooseGoods">
                                        <option value="">全部资源</option>
                                    </select>
                                    <select name="ChangeReason" id="ChangeReason" lay-filter="ChangeReason"
                                            onchange="getvalue()" xm-select="ChangeReason">
                                        <option value="">全部原因</option>
                                    </select>
                                </div>

                                <div class="layui-form-item">

                                    <div class="layui-inline">
                                        <button class="layui-btn layui-btn-normal"  data-type="reload" id="SelectResource" onsubmit='return false'>搜索</button>
                                    </div>
                                    <div class="layui-inline" >
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" id="startTime" placeholder="开始时间"  lay-filter="startTime" name="startTime" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" id="endTime" placeholder="结束时间"  lay-filter="endTime" name="endTime" autocomplete="off">
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                    <div class="layui-form" id="table-list">
                        <table class="layui-table" lay-skin="nob" id="userTable" lay-filter="userTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tpl-alert"></div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/amazeui.min.js"></script>
<script src="js/app.js"></script>
<script src="js/layer${applicationScope.skin}/layer.js"></script>
<script src="js/frame/datagrid.js"></script>
<script src="js/amazeui.datatables.min.js"></script>
<script src="js/artDialog.js"></script>
<script src="js/iframeTools.js"></script>
<script src="js/laydate/laydate.js"></script>
<script src="layui/layui.js"></script>
<script src="js/common/monitor_back.js"></script>
<script type="text/javascript">
    layui.config({
        base:'layui/dist/'
    }).extend({
        formSelects:'formSelects-v4'
    });
    layui.use([ 'layer', 'form', 'formSelects', 'laydate', 'table'], function() {
        var layer = layui.layer
            ,form = layui.form
            ,formSelects = layui.formSelects
            ,laydate = layui.laydate
            ,table = layui.table;


        $(document).ready(function() {
            $.ajax({
                type : 'post',
                url : 'pa/GoodsSelectone',
                async : true,
                success : function(data) {
                    data = jQuery.parseJSON(data);//json对象
                    //$("#ChooseGoods").empty();//清空select
                    for(var i = 0, l = data.length;i < l;i++){
                        for(var key in data[i]){
                            $("#ChooseGoods").append("<option value="+ data[i][key] +">" + data[i][key] + "</option>");
                        }
                    }
                    form.render('select');
                }
            });
            if($('#ChooseGoods').val() == ''){
                $.ajax({
                    type : 'post',
                    url : 'pa/ReasonsSelectone',
                    async : true,
                    success : function(data) {
                        data = jQuery.parseJSON(data);//json对象
                        //$("#ChooseGoods").empty();//清空select
                        for(var i = 0, l = data.length;i < l;i++){
                            for(var key in data[i]){
                                $("#ChangeReason").append("<option value="+ data[i][key] +">" + data[i][key] + "</option>");
                            }
                        }
                        form.render('select');
                        formSelects.render('ChangeReason');
                    }
                });
            }
        });

        /* 给select添加onchange事件 */
    form.on('select(ChooseGoods)',function(){
        //console.log(JSON.stringify($('#ChooseGoods').val())); "钻石"
        $.ajax({
            type : 'post',
            url : 'pa/ReasonsSelectone',
            async : true,
            data:{
                ChooseGoods:$('#ChooseGoods').val()
            },
            success : function(data) {
                if (data === "") {
                    $("#ChangeReason").empty();//清空select
                    form.render('select');
                    formSelects.render('ChangeReason');
                }
                else {
                    data = jQuery.parseJSON(data);//json对象
                    //console.log(data);
                    $("#ChangeReason").empty();//清空select
                    $("#ChangeReason").append("<option value="+ "" +">" + "所有原因" + "</option>");
                    for(var i = 0, l = data.length;i < l;i++){
                        for(var key in data[i]){
                            //console.log(key + ':' +data[i][key]);
                            $("#ChangeReason").append("<option value="+ data[i][key] +">" + data[i][key] + "</option>");
                        }
                    }
                    form.render('select');
                    formSelects.render('ChangeReason');
                }
            }
        });
    });

    //日期选择器
    laydate.render({
        elem: '#startTime'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#endTime'
        ,type: 'datetime'
    });

    if($('#UserId').val() == "" ||  $('#UserId').val() == null){
        setTimeout(function(){
            //加个table表
            table.render({
                elem : '#userTable',
                url : 'pa/ResourceReason',
                method : 'post',
                title : '玩家资源变化',
                totalRow : true,
                cellMinWidth : 60, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                id:'allAttTable',
                request:{
                    pageName:'PageIndex',
                    limitName:'PageCount'
                },
                where:{
                    UserID : $('#UserId').val(),
                    ChooseGoods : $('#ChooseGoods').val(),
                    ChangeReason : $('#ChangeReason').val(),
                    startTime : $('#startTime').val(),
                    endTime: $('#endTime').val(),
                },
                page : true,
                cols : [ [
                    {field : 'ItemName',title : '变化物品类型',templet:'#ItemName'},
                    {field : 'Reason',title : '变化原因'},
                    {field : 'Value',title : '变化前物品数量',templet:'#Value'},
                    {field : 'Delta',title : '资源变化量',sort : true,templet:'#Delta'},
                    {field : 'ValueAfter',title : '变化后物品数量',templet:'#ValueAfter'},
                    {field : 'CreateTime',title : '资源变化时间'}
                ] ],
                response : {
                    statusCode : 200
                    //重新规定成功的状态码为 200，table 组件默认为 0
                },
                parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code" : res.status, //解析接口状态
                        "msg" : res.message, //解析提示文本
                        "count" : res.count, //解析数据长度
                        "data" : res.data //解析数据列表
                        //解析数据列表
                    };
                }
            });
        },2000);
    }else{
        //加个table表
        table.render({
            elem : '#userTable',
            url : 'pa/ResourceReason',
            method : 'post',
            title : '玩家资源变化',
            totalRow : true,
            page : true,
            cellMinWidth : 60, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            id:'allAttTable',
            request:{
                pageName:'PageIndex',
                limitName:'PageCount'
            },
            where:{
                UserID : $('#UserId').val(),
                ChooseGoods : $('#ChooseGoods').val(),
                ChangeReason : $('#ChangeReason').val(),
                startTime : $('#startTime').val(),
                endTime: $('#endTime').val(),
            }
            ,
            cols : [ [
                {field : 'ItemName',title : '变化物品类型',templet:'#ItemName'},
                {field : 'Reason',title : '变化原因'},
                {field : 'Value',title : '变化前物品数量',templet:'#Value'},
                {field : 'Delta',title : '资源变化量',sort : true,templet:'#Delta'},
                {field : 'ValueAfter',title : '变化后物品数量',templet:'#ValueAfter'},
                {field : 'CreateTime',title : '资源变化时间'}
            ] ],
            response : {
                statusCode : 200
                //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code" : res.status, //解析接口状态
                    "msg" : res.message, //解析提示文本
                    "count" : res.count, //解析数据长度
                    "data" : res.data //解析数据列表
                    //解析数据列表
                };
            }
        });
    }

    //根据条件查询表格数据重新加载
    var active = {
        reload: function(){
            //获取用户名
            var demoReload = $('#userTable');
            //执行重载
            table.reload('allAttTable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                //根据条件查询
                ,where: {
                    UserID : $('#UserId').val(),
                    ChooseGoods : $('#ChooseGoods').val(),
                    ChangeReason : formSelects.value('ChangeReason', 'nameStr'),
                    startTime : $('#startTime').val(),
                    endTime: $('#endTime').val(),
                }
            });
            return false;
        }
    };
    //点击搜索按钮根据用户名称查询
    $('#SelectResource').on('click',function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    });
</script>
</body>
</html>
